<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <!-- title -->
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>市民卡</h2>
        </div>
      </div>

      <!-- 搜索 -->
      <div class="normal-box-bd">
        <div class="clearfix mb-20">
          <Button
            custom-icon="iconfont icon-fangkuai2"
            type="primary"
            size="small"
            style="float: right"
            @click="bandCard"
            >新增绑定</Button
          >

          <Input
            class="mr-10"
            v-model="queryData.mobile"
            placeholder="手机号"
            :clearable=true
            style="width: 200px"
          />
          <Col span="4" class="mr-10">
            <sele @ProvinceData="childByValue"></sele>
          </Col>
          <Button
            type="primary"
            custom-icon="iconfont icon-chaxun"
            size="small"
            @click="getList"
            >查找</Button
          >
        </div>
      </div>

      <div>
        <i-table
          stripe
          highlight-row
          border
          :content="self"
          :columns="Tcolumns"
          :data="dataList"
        ></i-table>
      </div>
      <div class="page">
        <Page
          :total="queryData.totalRecord"
          :page-size="queryData.limit"
          :current="queryData.page"
          show-total
          show-elevator
          @on-change="changepage"
        ></Page>
      </div>

      <!--新建/修改用户-->
        <Modal v-model="bindWin.show" title="新增绑定" @on-ok="dataOk">
          <Form ref="check" :model="bindWin.data" :label-width="80" :rules="bindWin.rules">
            <FormItem label="选择区域" prop="bankId">
                <Col span="18" class="mr-10">
                    <sele @ProvinceData="childByValue2"></sele>
                </Col>
            </FormItem>
            <FormItem label="输入住户" prop="address">
              <Input placeholder="格式为1-1-101" v-model="bindWin.data.address" style="width:300px;"/>
            </FormItem>

            <FormItem label="姓名 " prop="name">
              <Input placeholder="请输入" v-model="bindWin.data.name" style="width:300px;"/>
            </FormItem>
            <FormItem label="手机号" prop="mobile">
              <Input placeholder="请输入" v-model="bindWin.data.mobile" style="width:300px;"/>
            </FormItem>
            <FormItem label="银行卡号 " prop="bankCard">
              <Input placeholder="请输入" v-model="bindWin.data.bankCard" style="width:300px;"/>
            </FormItem>
            <FormItem label="芯片号" prop="chipId">
              <Input placeholder="请输入" v-model="bindWin.data.chipId" style="width:300px;"/>
            </FormItem>
            <FormItem>
                <RadioGroup v-model="bindWin.data.cardType">
                    <Radio label="1">新办卡</Radio>
                    <Radio label="2">存量卡</Radio>
                </RadioGroup>
            </FormItem>

          </Form>
        </Modal>
    </div>
  </div>
</template>

<script>
import Request from "@/api/request.js";
// import moment from "moment";
import { Message } from "iview";
import sele from "@/view/test/city.vue";
export default {
  components: {
    sele,
  },
  data() {
    return {
      dataList: [],
      keyWords: "", // 搜索关键字
      bindWin: {
          show: false,
          title: '',
          data: {
            address: '',
            name: '',
            mobile: '',
            bankCard: '',
            chipId: '',
            cardType: '1'
          },
          rules: {
              address: [
                { required: true, message: "请填写住户", trigger: "blur" }
                ],
              name: [{ required: true, message: "请填写姓名", trigger: "blur" }],
              mobile: [
                { required: true, message: "请填写手机号", trigger: "blur" },
                { pattern: /^1[3456789]\d{9}$/, message: "手机号码格式不正确", trigger: ["blur",'change'] },
              ],
              bankCard: [
                { required: true, message: "请填写银行卡号", trigger: "blur" },
                { min: 8, message: '请输入正确的银行卡号', trigger: ["blur",'change'] }
                ],
              chipId: [{ required: true, message: "请填写芯片号", trigger: "blur" }],
              cardType: [{ required: true, message: "请选择类型", trigger: "blur" }],
          },

      },
      option: [
            { ask: '1', name: '桶绑定（厨余）' },
            { ask: '3', name: '桶绑定（其他）' },
            { ask: '4', name: '市民卡' },
            { ask: '8', name: '村口芯片' },
        ],

      // 获取数据配置
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        mobile: "",
      },

      // 表格配置
      self: this,
      Tcolumns: [
        { align: "center", title: "村口卡片", key: "cardNo" },
        { align: "center", title: "姓名", key: "name" },
        { align: "center", title: "手机号", key: "mobile" },
        { align: "center", title: "芯片号", key: "chipId" },
        { align: "center", title: "银行卡号", key: "bankCard" },
        {
            align:"center",
            title: "绑定类型",
            render: (create, params)=> {
                let type = Number(params.row.cardType)
                let text
                switch(type) {
                    case 1: text = '新办卡';break;
                    case 2: text = '存量卡';break;
                    default: text = '未知类型'
                }
                return create('div',{},text)
            }
        },
        { align: "center", title: "区域", key: "address" },
        { align: "center", title: "绑定时间", key: "createTime" },
        { // 操作
          title: '操作',
          key: 'action',
          align: 'center',
          render: (create, params)=> {
              return create('i-button',{
                  props: { type: 'error', size: 'small'},
                  style: {margin: '0 3px'},
                  on: {click:()=> {this.remove(params.row.id)}}
              },'删除')
          }
        }


      ],
    };
  },
  mounted() {
     let area = window.defArea
    console.log(99,window.defArea);
    this.queryData.provid = area[0]
    this.queryData.cityid = area[1]
    this.queryData.distid = area[2]
    this.queryData.strtid = area[3];
    this.queryData.commid = area[4];
    this.queryData.comminid = area[5];
    this.getList();
  },
  methods: {
    // 获取用户列表
    async getList() {
      let data = await Request("get", this.queryData, "ckBankChip/page")
      if(data.code!=0) {
        this.$Message.error(data.Message)
        return
      }
      let res = data.data
      this.queryData.totalRecord = res.totalRecord;
      this.dataList = res.list;
      console.log(res.list);
    },

    // 删除
    async remove(id) {
      this.$Modal.confirm({
        title: "删除确认",
        content:
          "<p>你确认要删除此绑定吗？</p>",
        loading: true,
        onOk: async () => {
            let data = await Request("delete", '', `ckBankChip/${id}`)
            if(data.code!=0) {
              this.$Message.error(data.Message)
              return
            }
            this.$Message.success("操作成功");
            this.getList()
            this.$Modal.remove();
        }
      });



    },

    // 分页切换
    changepage(index) {
      this.queryData.page = index;
      this.getList();
    },

    // 查询清空
    clearQuery() {
      this.queryData.userId = "";
      this.queryData.name = "";
      this.queryData.phone = "";
    },

    // 提交绑定数据
    dataOk() {
        let data = this.bindWin.data
        console.log(data);
        this.$refs["check"].validate(async valid => {
        if(!valid) {
          this.changeLoading()
          return
        }
        if(valid&&data.comminid) {

          let res = await Request('post',data,'ckBankChip/')
          if(res.code==0) {
            this.$Message.success("操作成功")
            this.clearData()
            this.getList()
            this.bindWin.show = false
            return
          }
         this.$Message.error(res.Message)
        } else {
          this.$Message.info("请选择完整地区")
          this.changeLoading()
        }
          })
    },
    // 改变load状态
    changeLoading() {
      this.bindWin.show = false;
      this.$nextTick(() => {
        this.bindWin.show = true;
      });
    },
    // 绑定芯片弹窗
    bandCard() {
        this.bindWin.show = true
    },

    // 数据清空
    clearData() {
      let data = this.bindWin.data
      data.address = ''
      data.name = ''
      data.mobile = ''
      data.bankCard = ''
      data.chipId = ''
      data.cardType = '1'
    },

    // 六级联动数据获取
    childByValue(data) {
      let area = this.queryData;
      area.provid = data.provid || "";
      area.cityid = data.cityid || "";
      area.distid = data.distid || "";
      area.strtid = data.strtid || "";
      area.commid = data.commid || "";
      area.comminid = data.comminid || "";
    },
    // 六级联动数据获取
    childByValue2(data) {
      let area = this.bindWin.data;
      area.provid = data.provid || "";
      area.cityid = data.cityid || "";
      area.distid = data.distid || "";
      area.strtid = data.strtid || "";
      area.commid = data.commid || "";
      area.comminid = data.comminid || "";
    },
  },
};
</script>

<style>
td[class="y ivu-table-column-center"] {
  background: #02d792 !important;
  color: #fff;
}
td[class="n ivu-table-column-center"] {
  background: #f00 !important;
  color: #fff;
}
.page {
  padding: 1em 0.5em;
}
</style>
